<template>
  <form-item-setting v-model:config="config">
    <a-form-item
      field="defaultValue"
      tooltip=""
      label="默认值"
      :allow-clear="true"
    >
      <a-select
        v-model="config.config.defaultValue"
        allow-clear
        :options="config.config.options"
        :multiple="true"
        :limit="config.config.max"
      >
      </a-select>
    </a-form-item>
    <a-form-item
      field="direction"
      tooltip=""
      label="排列方向"
    >
      <a-radio-group v-model="config.config.direction" type="button">
        <a-radio value="horizontal">horizontal</a-radio>
        <a-radio value="vertical">vertical</a-radio>
      </a-radio-group>
    </a-form-item>
    <a-form-item
      field="limit"
      tooltip="支持最多选中的数量"
      label="最多选项"
    >
      <a-input-number
        v-model="config.config.max"
        mode="button"
        allow-clear
      />
    </a-form-item>
    <a-form-item
      field="checkAll"
      tooltip=""
      label="显示全选"
    >
      <a-switch
        v-model="config.config.checkAll"
        type="round"
      >
        <template #checked>
          是
        </template>
        <template #unchecked>
          否
        </template>
      </a-switch>
    </a-form-item>
    <a-form
      v-model="config"
      size="mini"
      label-align="right"
      layout="vertical"
      :label-col-props="labelColProps"
      :wrapper-col-props="wrapperColProps"
    >
      <a-form-item
        field="wrap"
        tooltip=""
        label="选项配置"
        required
      >
        <a-layout>
          <a-space direction="vertical" :size="10" style="display: block;">
            <template v-for="(item, index) in config.config.options" :key="index">
              <a-row justify="space-between">
                <a-col :span="11">
                  <a-input v-model="item.label" placeholder="label" allow-clear />
                </a-col>
                <a-col :span="11">
                  <a-input v-model="item.value" placeholder="value" allow-clear />
                </a-col>
                <a-col :span="2">
                  <a-button status="danger" @click.stop="deleteOption(item.value)">
                    <template #icon>
                      <icon-delete />
                    </template>
                  </a-button>
                </a-col>
              </a-row>
            </template>
            <a-button type="primary" style="width: 100%;" @click.stop="addOption">
              <template #icon>
                <icon-plus />
              </template>
              增加选项
            </a-button>
          </a-space>
        </a-layout>
      </a-form-item>
    </a-form>
    <a-divider style="border-bottom-style: dotted" orientation="center" :size="2" :margin="0">
      事件设置
    </a-divider>
    <br />
    <a-form-item
      field="onChangeFunction"
      tooltip=""
      label="Change"
    >
      <a-button
        type="primary"
        shape="round"
        @click="editOnChange"
      >
        <template #icon>
          <icon-edit />
        </template>
        编辑事件
      </a-button>
      <code-editor
        ref="codeEditorRef"
        v-model:code="config.config.onChangeFunction"
      />
    </a-form-item>
  </form-item-setting>
</template>

<script lang="ts" setup>
import { ref, defineModel } from 'vue';
import FormItemSetting from '@/components/form-design/item-setting/form-item-setting.vue';
import CodeEditor from '@/components/code-editor/index.vue';
import { labelColProps, wrapperColProps } from '../config';

const config = defineModel('config', { type: Object, default: {} });

const codeEditorRef = ref();

const editOnChange = () => {
  codeEditorRef.value.open();
};

const deleteOption = (value: string) => {
  config.value.config.options = config.value.config.options.filter((item: { value: string; }) => item.value !== value);
};

const addOption = () => {
  config.value.config.options.push({
    label: '',
    value: ''
  });
};

</script>

<script lang="ts">
export default {
  name: 'ItemSettingCheckBox'
};
</script>

<style scoped>

</style>